class List{
  page = 1;
  pageNum = 4;
  onOff = false;
  constructor(){
      //获取数据
      this.getData(this.page);
      window.onscroll = this.scroll.bind(this);
      this.shopArea();
  }
    /*****数据的获取******/
    async getData(curPage){
      // console.log('getData');
      layer.msg('加载中...')
      //分割数组
      let start = (curPage - 1) * this.pageNum;
      let end = curPage * this.pageNum;
      let size = 100;
      //获取数据
      let { data , status} = await axios.get('http://localhost:8888/goods/list?pagesize='+size);
      // console.log(data.list);
      //设置延时器
      setTimeout(()=>{
          let res = data.list.slice(start,end);
          // console.log(res);
          if(!res.length){
              layer.msg('没有了...')
          }
          let html='';
          res.forEach(goods => {
              html += `<li class="yui3-u-1-5" onclick='List.item(${goods.goods_id})'>
              <div class="p-img">
                  <a href="#none"><img src="${goods.img_big_logo}"></a>
              </div>
              <div class="attr"><em>${goods.title}</em></div>
              <div class="price"><strong><em>¥</em><i>${goods.current_price}</i></strong><s>￥${goods.price}</s></div>
              <div class="sold"><span>已售${goods.sale_type}</span><img src="./uploads/state_07.png" alt=""><span>剩余${goods.goods_number}件</span></div>
              <div class="operate">
                  <a href="#none" onclick="List.nowBuy(${goods.goods_id})">立即抢购</a>
              </div>
          </li>`;
            });
            // 将商品数据追加到页面中
        this.$('.goods-list .yui3-g').innerHTML += html;
        this.scroll();
      })
  }
  //懒加载
  scroll(){
      // console.log(55555);
       //可视区的高度
       let cY = document.documentElement.clientHeight;
       //滚动条的top
       let scrollY = document.documentElement.scrollTop;
       //最后一个子元素的top
       let eleY = this.$('.goods-list .yui3-g').lastElementChild.offsetTop;
       console.log(cY,scrollY,eleY);
       if(scrollY + cY > eleY){
          // console.log(999);
          // console.log(this.onOff);
          if(this.onOff) return
          // console.log(3333);
          this.onOff = true;
          // this.addEvent();
          this.getData(++this.page);
          setTimeout(() => {
            this.onOff = false;
          },500)
        }
  }
    //跳转到商品详情页
    static item(goodsId){
      //判断是否已登录
      let token = localStorage.getItem('token');
      if (!token) location.href = './login.html';
      //商品id
      let id = goodsId;
      // console.log(id);
      location.href='./item.html?id='+id;
    }
    //立即抢购
    static nowBuy(goodsId) {
        // console.log(1111);
        // 判断是否有token
        let token = localStorage.getItem('token');
        if (!token) location.href = './login.html';
        // 将购买商品,加入购物车
        let userId = localStorage.getItem('user_id');
        let param = `id=${userId}&goodsId=${goodsId}`;
        // 商品id
        // console.log(userId, goodsId);
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.defaults.headers.common['Authorization'] = token;
        axios.post('http://localhost:8888/cart/add', param).then(res => {
          // console.log(res);
          let { status, data } = res;
          // 判断服务器状态
          if (status != 200) return;
          if (data.code == 0) location.href = './login.html';
          // console.log(data);
          // 提示下一步的操作
          layer.confirm('是否去购物车结算', {
            btn: ['是', '继续买'] //按钮
          }, function () {
            // layer.msg('的确很重要', { icon: 1 });
            // 去购物车
            location.href = './cart.html';
          });
        })
      }
      //我的购物车数量
      async shopArea(){
        let num = 0;
        let Token = localStorage.getItem('token');
        axios.defaults.headers.common['Authorization'] = Token;
        let userId = localStorage.getItem('user_id');
        let data = await axios.get('http://localhost:8888/cart/list?id='+userId,).then(({data,status})=>{
          if(data.code == 1 && status == 200){
            // console.log(data.cart);
            data.cart.forEach( ul =>{
              let value = ul.cart_number;
              // console.log(ul.cart_number);
              num += value;
              
            })
          }
          this.$('.shopArea .shopnum').innerHTML = num;
        });
      }
    $(ele){
        let res = document.querySelectorAll(ele);
        return res.length==1 ? res[0] : res;
    }
}
new List;